.createIndexContainer {
  width: 497px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
  box-shadow: -15px 5px 15px rgba(0, 0, 0, 0.15);
  z-index: 12;
  .title {
    height: 50px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: start;
    font-size: 17px;
    border-bottom: 1px solid #dddddd;
    background: #fff;

    span {
      flex: 1;
    }

    .pointer {
      width: 20px;
    }
  }
  .createIndexBody {
    height: calc(~'100% - 116px');
    padding: 0 25px 26px;
    overflow-y: auto;
    font-size: 13px;
    .minBold {
      font-weight: 500;
    }
    .sunTitle {
      color: #333;
      margin: 30px 0 18px 0;
    }
    .lineHeight20 {
      line-height: 20px;
    }
    .selectedInfo {
      .selectedRow {
        margin-bottom: 15px;
        .col1 {
          width: 219px;
        }
        .col2 {
          width: 138px;
        }
        .remove {
          margin: 0 14px 0 18px;
        }
        .disabledAct {
          cursor: not-allowed !important;
        }
      }
    }
    .descriptionInfos {
      margin-top: 30px;
      .desTitle {
        color: #2196f3;
      }
      .desContent {
        color: #757575;
      }
    }
  }
  .createIndexFooter {
    height: 66px;
    padding: 15px 0 15px 25px;
    font-size: 14px;
    background-color: #f5f5f5;
    .confirmBtn {
      width: 106px;
      height: 36px;
      display: inline-block;
      line-height: 36px;
      color: #ffffff;
      background-color: #2196f3;
      border-radius: 3px;
      margin-right: 15px;
      text-align: center;
    }
    .disabled {
      background-color: #9e9e9e;
      cursor: not-allowed;
    }
    .cancelBtn {
      width: 78px;
      height: 36px;
      display: inline-block;
      line-height: 36px;
      background: #ffffff;
      border: 1px solid #2196f3;
      border-radius: 3px;
      text-align: center;
      color: #2196f3;
    }
  }
}
